<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>权益维护</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link href="/node_modules/LobsterUIFrame/layuiadmin/layui/css/layui.css" rel="stylesheet" />
    <link href="/node_modules/LobsterUIFrame/layuiadmin/style/admin.css" rel="stylesheet" />
    <link href="/node_modules/LobsterUIFrame/layuiadmin/layui/css/modules/layui-icon-extend/iconfont.css"
        rel="stylesheet" />
    <script src="/node_modules/LobsterUIFrame/layuiadmin/layui/layui.js"></script>
</head>

<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                <div class="layui-input-inline">
                    <div class="layui-input-inline" style="width: 200px;">
                        <input type="text" id="searchkey" name="Word" placeholder="关键字" autocomplete="off"
                            class="layui-input">
                    </div>
                </div>
                <div class="layui-input-inline">
                    <button class="layui-btn layuiadmin-btn-useradmin" lay-submit lay-filter="LAY-app-front-search"
                        id="btnSearch">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>查找
                    </button>
                    <button class="layui-btn layuiadmin-btn-useradmin" id="add">
                        <i class="layui-icon layui-icon-add layuiadmin-button-btn"></i>新增
                    </button>
                </div>
            </div>
            <div class="layui-card-body" id="view">
            </div>
        </div>
    </div>
    <div class="layui-fluid box" style="display: none;" id="adddiv">
        <div class="layui-form" lay-filter="formdata" style="padding: 0px 0px 0 0;">
            <div class="layui-card">
                <div class="layui-card-body box">
                    <input type="hidden" name="Id" value="0" />
                    <input type="hidden" name="DelFlag" value="0" />
                    <div class="layui-form-item active">
                        <label class="layui-form-label"><i style="color:red;">*&ensp; </i>敏感词</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" name="Word" maxlength="20" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>

</html>
<style>
    .layui-card-body {
        display: flex;
    }

    .item {
        position: relative;
        border-radius: 20px;
        height: 30px;
        padding: 0 30px;
        border: 1px solid #999;
        text-align: center;
        line-height: 30px;
        margin-right: 20px;
    }

    .close {
        position: absolute;
        right: -5px;
        top: -10px;
        border-radius: 50%;
        border: 1px solid #999;
        width: 15px;
        height: 15px;
        line-height: 15px;
        text-align: center;
        background-color: #999;
        color: #fff;
    }
</style>
<script id="demo" type="text/html">
    {{# layui.each(d, function(index, item){ }}
    <div class="item">
        {{item.Word}}
        <div class="close" data-word="{{item.Word}}" data-id="{{item.Id}}" data-idx={{index}}>
            <i class="layui-icon layui-icon-close"></i>  
        </div>
    </div> 
    {{# }) }}
</script>
<script>
    layui.config({
        base: '/node_modules/LobsterUIFrame/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    });

    layui.define(['index', 'layer', 'form', 'element', 'table', 'laydate', 'laytpl'], function () {
        var layer = layui.layer;
        var form = layui.form;
        var element = layui.element;
        var table = layui.table;
        var $ = layui.$;
        var admin = layui.admin;
        var setter = layui.setter;
        var laydate = layui.laydate;
        var laytpl = layui.laytpl;
        var controller = {
            data: {
                table: null,
                tableoptions: {},
                layerindex: 0,
                wordlist: [],
            },
            //初始化页面
            initpage: function () {
                this.initevent();
                this.loaddata();
            },
            getbaseurl: function (fun) {
                var url = "/lowcode/APP20211203093514696/name/?view=layui&fun=" + fun;
                return url;
            },
            //初始化事件
            initevent: function () {
                var self = this;
                //查找reload,通过条件，查询网格的table重载数据显示到界面
                form.on("submit(LAY-app-front-search)", function (data) {
                    self.loaddata();
                });
                //模板新增
                $("#add").click(function () {
                    self.openEdit();
                })
                $(document).on("click", ".close", function () {
                    var id = $(this).data("id");
                    var idx = $(this).data("idx");
                    var word = $(this).data("word");
                    layer.confirm('确定删除吗？?', { icon: 2, title: '提示' }, function (index) {
                        self.saveword({
                            Id: id,
                            Word: word,
                            DelFlag: 1
                        }, () => {
                            self.wordlist.splice(idx, 1);
                            self.inittemp();
                        })
                    });
                })

            },
            //加载订单列表
            loaddata: function () {
                var self = this;
                admin.req({
                    url: self.getbaseurl("shieldingword.getlist"),
                    method: "GET",
                    data: {
                        page: 1,
                        limit: 1000,
                        searchkey: $("#searchkey").val()
                    },
                    done: res => {
                        self.wordlist = res.data;
                        this.inittemp();
                    }
                });
            },
            inittemp() {
                var self = this;
                var getTpl = demo.innerHTML
                    , view = document.getElementById('view');
                laytpl(getTpl).render(self.wordlist, function (html) {
                    view.innerHTML = html;
                });
            },
            //新增
            openEdit: function (title) {
                var self = this;
                layer.open({
                    type: 1
                    , title: title
                    , content: $('#adddiv')
                    , btn: ['保存', '取消']
                    , maxmin: true
                    , area: ['500px', '300px']  //宽，高
                    , success: function (layero, index) {
                        $("[name='Word']").val('');
                    }
                    , btn2: function (index, layero) {

                    }
                    , cancel: function () {

                    }
                    , yes: function (index, layero) {
                        layer.msg('正在处理，请稍候', { icon: 16, time: 0, shade: [0.3, '#393D49'] });
                        var formdata = form.val('formdata')
                        self.saveword(formdata, () => {
                            self.loaddata();
                            layer.close(index);
                        })
                    }
                });
            },
            //保存任务 
            saveword: function (formdata, succ) {
                var self = this;
                admin.req({
                    url: self.getbaseurl("shieldingword.add"),
                    method: "POST",
                    data: formdata,
                    done: res => {
                        if (res.code == 0) {
                            layer.msg("操作成功!")
                            succ && succ();
                        }
                        else
                            layer.msg("操作失败!")
                    }
                });
            },
            //停启用
            enable: function (data, succ) {
                var self = this;
                admin.req({
                    url: self.getbaseurl("member.rightenable"),
                    method: "POST",
                    data: data,
                    done: res => {
                        layer.msg("保存成功!")
                        succ && succ();
                    }
                });
            }
        }

        /*
        * 入口
        */
        controller.initpage();
    });

</script>